<template>
  <div>
    <header>
      <a href="javascript:;" class="left">
        <i class="iconfont icon-up21" @click="handleHome"></i>
      </a>
      <p>商品信息</p>
      <a href="javascript:;" class="right">
        <i class="iconfont icon-kefu1"></i>
      </a>
    </header>
    <section>
      <div class="xsui-tab-type">
        <div class="new-tbl-type">
          <a
            v-for="(item, index) in list"
            :key="index"
            href="javascript:;"
            @click="handleJump(index)"
            :class="['new-tbl-cell', index == idx ? 'on' : '']"
          >
            {{ item }}
          </a>
        </div>
      </div>
      <!-- <Info/> -->
      <router-view></router-view>
    </section>
    <!-- 底部区域 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="allInfo.allNum" to="/cart"/>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" text="加入购物车" @click="handleAdd"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import {hList1} from '../api/hlist'
import Info from './Info'
import Vue from "vue";
import { Rate } from "vant";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
import {Toast} from 'vant'

Vue.use(Rate);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  data() {
    return {
      list: ["商品信息", "商品详情", "商品点评"],
      idx: 0,
      value:5,
      gdetail:null
    };
  },
  computed: {
     cartList() {
           return this.$store.state.detail.cartList
      },
     allInfo(){
          return this.$store.getters['detail/allInfo']
      },
      list1() {
      return this.$store.state.detail.xqlist
    }
  },
  components: {
      Info,
  },
  methods: {
      handleJump(i) {
          this.idx = i
          console.log(i);
          if(i==0){
              this.$router.push('/info')
          }else if(i==1){
              this.$router.push('/dinfo')
          }else{
              this.$router.push('/score')
          }
      },
      handleHome(){
          this.$router.push('/')
      },
      handleAdd(){  //加入购物车
          Toast('商品添加成功')
          let {list1} = this
          this.$store.commit('detail/cartAddMut',list1)
      }
  },
  created () {
    let {list1} = this
    console.log(list1);
  },
};
</script>

<style src="../assets/css/detail.css" scoped></style>
<style src="../assets/css/reset.css" scoped></style>
<style src="../assets/font/iconfont.css" scoped></style>
<style scoped>
a{
  color: #888;
}
</style>